<template>
  <div class="order-management-page">
    <div v-if="!isPreview">
      <el-card class="order-management-page__header">
        <div class="latest-version-box">
          <el-input v-model="queryCriteria.id" :placeholder="$t('orderManage.orderNo_s')" :clearable="true" />

          <div>
            <el-select class="switch_select" v-model="currType" ref="switch_select"
              :placeholder="$t('orderManage.creatorName_s')" @change="currTypeChange">
              <el-option v-for="item in institutionOption" :key="item.value" :label="item.label" :value="item.value">
                <img style="width: 15px; height: 15px" :src="item.icon" />
                <span style="margin-left: 10px">{{ item.label }}</span>
              </el-option>
            </el-select>
            <el-select v-if="currType === 1" class="switch_content" :clearable="true"
              v-model="queryCriteria.creatorName" filterable :placeholder="$t('orderManage.creatorName_s')">
              <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id" />
            </el-select>

            <el-select v-if="currType === 2" :clearable="true" v-model="queryCriteria.deptId" filterable
              :placeholder="$t('jigou.jigou18')">
              <el-option v-for="item in institutionList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>

          <el-select @change="cateChange" v-model="queryCriteria.orderDataType" multiple
            :placeholder="$t('orderManage.orderDataType_s')" @remove-tag="onCateSelectRemoveTag" style="width: 300px">
            <el-option v-for="option in orderTypeOptions" :key="option.value" :label="$t(option.label)"
              :value="option.value" />
          </el-select>
          <el-select v-model="queryCriteria.orderStatus" :placeholder="$t('orderManage.orderStatus_s')"
            :clearable="true">
            <el-option v-for="option in statusTypeOptions" :key="option.value" :label="$t(option.label)"
              :value="option.value" />
          </el-select>

          <el-select :clearable="true" filterable v-model="queryCriteria.countryName"
            :placeholder="$t('orderManage.country_p')" @change="countryChange">
            <el-option v-for="item in countryList" :key="item.id" :label="item.cname" :value="item.cname" />
          </el-select>

          <el-select :clearable="true" filterable v-model="queryCriteria.cityName" remote :remote-method="remotaCity"
            :placeholder="$t('orderManage.city_p')" v-lazy-load-dropdown="handleScrollDropdown" @change="cityChange">
            <el-option v-for="item in cityList" :key="item.id" :label="item.cityList" :value="item.cnName" />
          </el-select>

          <el-select :clearable="true" filterable v-model="serialParams.serialNo" remote :remote-method="remotaserialNo"
            :placeholder="$t('orderManage.serialNumber_p')" @change="serialChange"
            v-lazy-load-dropdown="handleScrollDropdown1">
            <el-option v-for="item in serialList" :key="item.serialNo" :label="item.serialNo" :value="item.serialNo" />
          </el-select>

          <el-date-picker range-separator="~" :picker-options="pickerOptions" :clearable="true" v-model="date"
            :end-placeholder="$t('orderManage.orderCreateTime2_s')"
            :start-placeholder="$t('orderManage.orderCreateTime1_s')" type="daterange" value-format="yyyy-MM-dd" />
          <div class="order-management-page__header-buttons">
            <el-button type="primary" icon="el-icon-search" @click="toSearch">
              {{ $t('orderManage.search') }}
            </el-button>
          </div>
        </div>
      </el-card>
      <el-card class="order-management-page__body">
        <div class="order-management-page__body-tool-buttons">
          <el-button icon="el-icon-plus" type="primary" size="small" @click="download('batch')">
            {{ $t('orderManage.batchDownload') }}
          </el-button>
          <el-button type="primary" size="small" @click="exportExcel()">
            {{ $t('orderManage.export') }}
          </el-button>
        </div>
        <div class="order-management-page__body-content">
          <el-table ref="table" :data="tableData" @selection-change="handleSelectionChange" height="540">
            <el-table-column type="selection" width="55" :selectable="(row) => !row.isSelected" />
            <el-table-column :label="$t('orderManage.orderNo')" align="center" prop="id" width="100" />
            <el-table-column :label="$t('orderManage.orderDataType')" align="center" prop="orderDataType" width="100">
              <template #default="scope">{{
                getClientTypeLabel('orderTypeOptions', scope.row.orderDataType)
              }}</template>
            </el-table-column>
            <el-table-column :label="$t('orderManage.orderStatus')" align="center" prop="orderStatus" width="150">
              <template #default="scope">{{
                getClientTypeLabel('statusTypeOptions', scope.row.orderStatus)
              }}</template>
            </el-table-column>
            <el-table-column :label="$t('orderManage.doctorName')" align="center" prop="doctorName" width="150" />
            <el-table-column :label="$t('orderManage.patientName')" align="center" prop="patientName" width="150" />
            <el-table-column :label="$t('caseorder.anli11')" align="center" prop="creatorDeptName" width="200" />
            <el-table-column :label="$t('orderManage.skillDeptName')" align="center" prop="skillDeptName" width="200" />
            <el-table-column :label="$t('orderManage.serialNumber')" align="center" prop="serialNumber" width="250" />
            <el-table-column :label="$t('orderManage.country')" align="center" prop="countryCn" width="100" />
            <el-table-column :label="$t('orderManage.city')" align="center" prop="cityCn" width="100" />
            <!-- <el-table-column :label="$t('orderManage.contactWay')" align="center" prop="contactWay">
          </el-table-column> -->
            <el-table-column :label="$t('orderManage.orderCreateTime')" align="center" prop="createDate" width="150" />
            <el-table-column :label="$t('add.add134')" align="center" prop="orderCreateTime" width="150" />
            <el-table-column :label="$t('orderManage.action')" align="center" width="160" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="mini" @click="download('single', scope.row)">
                  {{ $t('orderManage.download') }}
                </el-button>
                <el-button type="primary" size="mini" @click="toPreview(scope.row)">
                  {{ $t('caseorder.anli20') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination background :current-page="pageable.page" :page-size="pageable.pageSize"
          :page-sizes="[10, 20, 50, 100]" :total="pageable.total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="onPageSizeChange" @current-change="onPageChange" />
      </el-card>
    </div>
    <caseOrderDetail v-if="isPreview" :isOrderDownload="true" :id="previewId" @colsePreview="colsePreview" />

    <el-dialog :title="$t('add.add29')" :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%">
      <div v-loading="downloadLoading" :element-loading-text="$t('add.add068')">
        <p style="text-align: center">{{ $t('add.add070') }}</p>
      </div>
      <span v-show="!downloadLoading" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ $t('add.add31') }}
        </el-button>
        <el-button type="primary" @click="regenerateFile()">
          {{ $t('add.add067') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
Date.prototype.Format = function (fmt) {
  var o = {
    'M+': this.getMonth() + 1, //月份
    'd+': this.getDate(), //日
    'H+': this.getHours(), //小时
    'm+': this.getMinutes(), //分
    's+': this.getSeconds(), //秒
    'q+': Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp('(' + k + ')').test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length),
      );
  return fmt;
};
import { formatDate } from '@/utils/index';
import caseOrderDetail from '@/views/order/index';
import { setCateTextColor } from '@/utils/slef.js';
function setPickerShortcutStyle(innerHTML) {
  const panelShortcutDom = document.querySelectorAll('.el-picker-panel__shortcut');
  panelShortcutDom.forEach((dom) => {
    if (dom.innerHTML === innerHTML) {
      dom.setAttribute('style', 'color: #003E67');
    } else {
      dom.setAttribute('style', 'color: #606266');
      
    }
  });
}
export default {
  name: 'orderManagement',
  data() {
    return {
      queryCriteria: {
        id: '',
        creatorName: '',
        orderDataType: [],
        orderStatus: '',
        orderCreateTime1: '',
        orderCreateTime2: '',
        countryName: '',
        cityName: '',
        deptId: '',
      },
      date: '',
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t('add.add155'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add155'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add156'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add156'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add157'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add157'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 119);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add158'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add158'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 364);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      pageable: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
      userList: [],
      // 创建人 机构切换list
      institutionOption: [
        {
          label: '创建人',
          value: 1,
          icon: require('./../../assets/img/icon/founder.png'),
        },
        {
          label: '机构',
          value: 2,
          icon: require('./../../assets/img/icon/institution.png'),
        },
      ],
      currType: 1,
      institutionList: [],
      orderTypeOptions: [
        {
          value: '1',
          label: 'orderManage.orderTypeOption1',
        },
        {
          value: '2',
          label: 'orderManage.orderTypeOption2',
        },
        {
          value: '3',
          label: 'orderManage.orderTypeOption3',
        },
      ],
      statusTypeOptions: [
        {
          value: '-1',
          label: 'add.add062',
        },
        {
          value: '-2',
          label: 'partner.hezuo20',
        },
        {
          value: '0',
          label: 'orderManage.statusTypeOption0',
        },
        {
          value: '1',
          label: 'orderManage.statusTypeOption1',
        },
        {
          value: '2',
          label: 'orderManage.statusTypeOption2',
        },
        {
          value: '3',
          label: 'orderManage.statusTypeOption3',
        },
        {
          value: '4',
          label: 'orderManage.statusTypeOption4',
        },
        {
          value: '5',
          label: 'orderManage.statusTypeOption5',
        },
        {
          value: '6',
          label: 'orderManage.statusTypeOption6',
        },
        {
          value: '8',
          label: 'orderManage.statusTypeOption8',
        },
      ],
      tableData: [],
      selectedRow: undefined,
      selectionList: [],

      // 国家list
      countryList: [],
      cityList: [],
      // 存储城市下拉列表接口请求参数
      cityParams: {
        page: 1,
        limit: 10,
        countryId: null,
        cityName: '',
      },
      cityTotal: 0,

      // 序列号下拉列表接口请求参数
      serialParams: {
        serialNo: '',
        page: 1,
        limit: 10,
      },
      serialList: [],
      serialTotal: 0,

      // 是否是预览状态
      isPreview: false,
      previewId: 0,
      // 控制提示弹框是否出现
      dialogVisible: false,
      // 控制下载确认弹框中的loading
      downloadLoading: false,
      // 存储操作行
      currRow: {},
    };
  },
  components: {
    caseOrderDetail,
  },
  created() {
    // 获取用户下拉数据
    this.getUserList();
    // 获取机构下拉数据
    this.getInstitutionList();
    // 获取设备序列号下拉数据
    this.getSerialList();

    // 获取国家城市下拉数据
    this.getCountryData();
    this.getCityData();
  },
  mounted() {
    this.$refs['switch_select'].$el.children[0].children[0].setAttribute(
      'style',
      'background:url(' +
      this.institutionOption[0].icon +
      ') no-repeat;color:#fff;background-size: 20px;text-indent: -9999px;background-position: 10px',
    );

    setTimeout(() => {
      // 设置牙齿类型的下拉文字不同样式
      setCateTextColor(this.$t('caseorder.yulan.yulan7'),this.$t('caseorder.yulan.yulan8'),this.$t('caseorder.yulan.yulan9'));
    }, 200);



  },
  directives: {
    'lazy-load-dropdown': {
      bind(el, binding) {
        const SELECT_DOM = el.querySelector('.el-select-dropdown .el-scrollbar__wrap');
        // SELECT_DOM 获取到的dmo节点 下面需要用到dmo节点的clientHeight
        SELECT_DOM.addEventListener('scroll', () => {
          if (SELECT_DOM.scrollTop + SELECT_DOM.clientHeight >= SELECT_DOM.scrollHeight) {
            binding.value();
          }
        });
      },
    },
  },
  methods: {
    cateChange() {

      this.$nextTick(() => {
        // 设置牙齿类型的下拉文字不同样式
        setCateTextColor(this.$t('caseorder.yulan.yulan7'),this.$t('caseorder.yulan.yulan8'),this.$t('caseorder.yulan.yulan9'));
      });
    },

    colsePreview() {
      this.isPreview = false;
    },
    exportExcel() {
      if (this.selectionList.length <= 0) {
        return this.$message({
          message: this.$t('orderManage.export_limit'),
          type: 'warning',
        });
      }
      this.$http({
        method: 'get',
        url: 'order/orderManagementExportExcel', //后端接口
        responseType: 'blob',
        params: {
          id: this.selectionList.map((m) => m.id).join(','),
          // page: this.pageable.page.toString(),
          // limit: this.pageable.pageSize.toString(),
        },
      }).then(({ data: res }) => {
        let date = new Date().Format('yyyy-MM-dd HH_mm_ss');
        const url = window.URL.createObjectURL(new Blob([res]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `${date}_订单文件.xls`);
        document.body.appendChild(link);
        link.click();
      });
    },
    formatTime(time) { },
    currTypeChange() {
      this.queryCriteria.creatorName = '';
      this.queryCriteria.deptId = '';
      for (let i = 0; i < this.institutionOption.length; i++) {
        if (this.currType === this.institutionOption[i].value) {
          this.$refs['switch_select'].$el.children[0].children[0].setAttribute(
            'style',
            'background:url(' +
            this.institutionOption[i].icon +
            ') no-repeat;color:#fff;background-size: 20px;text-indent: -9999px;background-position: 10px',
          );
        }
      }
    },
    onCateSelectRemoveTag(orderDataType) {
      if (this.queryCriteria.orderDataType.length === 0) {
        this.queryCriteria.orderDataType = [orderDataType];
      }
    },
    getCountryData() {
      this.$http({
        method: 'get',
        url: 'country/getListCountry', //后端接口
      }).then(({ data: res }) => {
        if (res.code === 0 && res.data) {
          this.countryList = res.data;
        }
      });
    },
    getCityData() {
      this.$http({
        method: 'get',
        url: 'city/page', //后端接口
        params: this.cityParams,
      }).then(({ data: res }) => {
        if (res.code === 0 && res.data) {
          this.cityTotal = res.data.total;

          this.cityList.push(...res.data.list);
        }
      });
    },
    countryChange() {
      this.cityParams.cityName = '';
      this.queryCriteria.cityName = '';
      this.cityParams.page = 1;
      let needObj = this.countryList.filter((f) => f.cname === this.queryCriteria.countryName)[0];
      if (needObj) {
        this.cityParams.countryId = needObj.id;
        this.cityList = [];
        this.getCityData();
      } else {
        this.cityParams.countryId = null;
        this.getCityData();
      }
    },
    cityChange() {
      this.cityList = [];
      this.cityParams.cityName = this.queryCriteria.cityName;
      this.getCityData();
    },

    remotaCity(val) {
      this.cityParams.cityName = val;
      this.cityParams.page = 1;
      this.cityList = [];
      this.getCityData();
    },
    remotaserialNo(val) {
      this.serialParams.serialNo = val;
      this.serialParams.page = 1;
      this.serialList = [];
      this.getSerialList();
    },
    // 给自定义指令用的方法
    handleScrollDropdown() {
      this.cityParams.page++;
      // 这一步是做了一个容错判断 在pageNum>total 时 return出去
      if ((this.cityParams.page - 1) * this.cityParams.limit > this.cityTotal) return;
      // 获取列表接口
      this.getCityData();
    },
    handleScrollDropdown1() {
      this.serialParams.page++;
      if ((this.serialParams.page - 1) * this.serialParams.limit > this.serialTotal) return;
      this.getSerialList();
    },
    serialChange() {
      this.serialParams.page = 1;
      this.serialList = [];
      this.getSerialList();
    },
    getUserList() {
      this.$http({
        method: 'get',
        url: 'sys/user/userList', //后端接口
      }).then(({ data: res }) => {
        if (res.code === 0 && res.data) {
          this.userList = res.data;
          // this.queryCriteria.creatorName = this.userList[0].id;
          // 初始化
          this.initControl();
        }
      });
    },
    getInstitutionList() {
      this.$http({
        method: 'get',
        url: 'sys/organized/joiningInstitutions', //后端接口
      }).then(({ data: res }) => {
        if (res.code === 0 && res.data) {
          this.institutionList = res.data;
        }
      });
    },
    getSerialList() {
      this.$http({
        method: 'get',
        url: 'device/page', //后端接口
        params: this.serialParams,
      }).then(({ data: res }) => {
        if (res.code === 0 && res.data) {
          this.serialTotal = res.data.total;
          this.serialList.push(...res.data.list);
        }
      });
    },
    initControl() {
      this.queryCriteria.orderDataType = ['1'];
      const end = new Date();
      const start = new Date();
      const a = end.setTime(start.getTime());
      const b = start.setTime(start.getTime() - 3600 * 1000 * 24 * 119);

      this.date = [this.shijianc(b), this.shijianc(a)];

      this.search();
    },
    shijianc(time) {
      const date = new Date(time);
      const Y = date.getFullYear() + '-';
      const M =
        (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return Y + M + D;
    },
    toSearch() {
      this.pageable.page = 1;
      this.search();
    },
    search() {
      if (this.date && this.date.length > 0) {
        this.queryCriteria.orderCreateTime1 = this.date[0];
        this.queryCriteria.orderCreateTime2 = this.date[1];
      } else {
        this.queryCriteria.orderCreateTime1 = '';
        this.queryCriteria.orderCreateTime2 = '';
      }
      this.queryCriteria.page = this.pageable.page.toString();
      this.queryCriteria.limit = this.pageable.pageSize.toString();
      let params = JSON.parse(JSON.stringify(this.queryCriteria));
      params.deptId = String(params.deptId);
      params.orderDataType = this.queryCriteria.orderDataType.join(',');
      params.serialNumber = this.serialParams.serialNo;

      this.$http({
        method: 'post',
        url: 'order/orderManagement', //后端接口
        data: params,
      }).then(({ data: res }) => {
        if (res.code === 0 && res.data) {
          const { list, total } = res.data;
          this.tableData = list;
          this.tableData.forEach((item) => {
            item['isSelected'] = false;
          });
          this.pageable.total = total;
        }
      });
    },

    handleSelectionChange(val) {
      this.selectionList = val;
    },
    download(type, row) {
      // 记录不能下载的文件列表
      let damageNoLists = [];
      if (type === 'single') {
        this.currRow = row;
        if (row.markStatus && row.markStatus === -1) {
          this.dialogVisible = true;
          return false;
        }
        if (
          row.zipName.indexOf('oss.blzdentalcloud.com') !== -1 ||
          row.zipName.indexOf('blztech.oss-cn-hangzhou.aliyuncs.com') !== -1 || 
          row.zipName.indexOf('blzoss-china.oss-cn-beijing.aliyuncs.com') !== -1
        ) {
          const a = document.createElement('a'); // 创建一个HTML 元素
          let url = row.zipName;
          a.setAttribute('download', ''); //download属性
          a.setAttribute('href', url); // href链接
          a.click(); // 自执行点击事件
        } else {
          this.$message({
            message: `${this.$t('orderManage.prompt1')}${row.id}${this.$t('orderManage.prompt2')}`,
            type: 'warning',
          });
        }
      } else {
        if (this.selectionList.length <= 0) {
          return this.$message({
            message: this.$t('orderManage.prompt'),
            type: 'warning',
          });
        }

        this.selectionList.forEach((item) => {
          if (!item.zipName) {
            return false;
          }
          if (
            item.zipName.indexOf('oss.blzdentalcloud.com') !== -1 ||
            item.zipName.indexOf('blzoss-china.oss-cn-beijing.aliyuncs.com') !== -1
          
          ) {
            try {
              let eleIF = document.createElement('iframe');
              eleIF.src = item.zipName;
              eleIF.style.display = 'none';
              document.body.appendChild(eleIF);
              //防止下载2次
              setTimeout(function () {
                document.body.removeChild(eleIF);
              }, 1000);
            } catch (e) {
              console.log(e);
            }
          } else {
            damageNoLists.push(item.id);
          }
        });
        if (damageNoLists.length > 0) {
          this.$message({
            message: `${this.$t('orderManage.prompt1')}${damageNoLists.join(',')}${this.$t(
              'orderManage.prompt2',
            )}`,
            type: 'warning',
          });
        }
      }
    },
    regenerateFile() {
      this.downloadLoading = true;
      this.$http
        .post('/dataConversion/coldDataToHotData2Cloud', {
          orderId: this.currRow.id,
          fileType: 1,
          platformType: 0,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.downloadLoading = false;
            this.dialogVisible = false;
            this.$message({
              message: this.$t('caseorder.anli104'),
              type: 'warning',
            });
            this.toSearch();
          } else {
            if (!res.data || !res.data.reason) {
              this.downloadLoading = false;
              this.dialogVisible = false;
              this.$message({
                message: this.$t('add.add071'),
                type: 'success',
              });
              const a = document.createElement('a'); // 创建一个HTML 元素
              let url = this.currRow.zipName;
              a.setAttribute('download', ''); //download属性
              a.setAttribute('href', url); // href链接
              a.click(); // 自执行点击事件
              this.toSearch();
            } else {
              this.$message({
                message: res.data.reason,
                type: 'warning',
              });
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    toPreview(row) {
      this.previewId = row.id;
      this.isPreview = true;
    },
    onPageChange(page) {
      this.pageable.page = page;
      this.search();
    },
    onPageSizeChange(pageSize) {
      this.pageable.pageSize = pageSize;
      this.search();
    },
    getClientTypeLabel(key, value) {
      const index = this[key].findIndex((e) => e.value === value.toString());
      if (index !== -1) return this.$t(this[key][index].label);
      return '';
    },
  },
};
</script>

<style lang="scss" scoped>
.order-management-page {
  width: 100%;
  height: 100%;

  &__header {
    height: var(--header-height);
    width: 100%;
    // padding-top: 60px;
    position: relative;

    .latest-version-box {
      // position: absolute;
      // top: 20px;
      // left: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
      width: 100%;

      .el-input {
        width: 260px;
      }

      .switch_select {
        width: 70px;
      }
    }

    ::v-deep .el-card__body {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &-inputs {
      display: flex;
      align-items: center;
      gap: 20px;

      &>* {
        width: 260px;
      }

      .el-date-editor {
        width: 340px;
      }
    }
  }

  &__body {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - var(--header-height) - 20px);

    ::v-deep .el-pagination {
      margin-top: 8px;
    }
  }

  ::v-deep .el-table th.el-table__cell>.cell {
    padding-left: 14px !important;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;

    .el-button {
      margin: 0 50px;
    }
  }
}
</style>
